<template>
  <div class="home-container">
    <!-- 头部导航栏 -->
    <van-nav-bar>
      <template #title>
         <van-button class="search-btn" icon="search" type="info" to='/search'>搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 滚动导航 -->
    <van-tabs class="navs" v-model="active" animated swipeable >
      <van-tab v-for="(item) in UserChannel" :key="item.id" :title="item.name">
        <Article :channelID ='item.id'>
        </Article>
      </van-tab>
      <template #nav-right>
        <div class="right-btn" @click="showPopup=true">
          <i class="toutiao toutiao-gengduo"></i>
        </div>
        <div class="placeholder"></div>
      </template>
    </van-tabs>

    <!-- 弹出层 -->
    <van-popup
      v-model="showPopup"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '88%' }"
    >
    <EditChannel :myChannel="UserChannel" :activeIndex ='active' @toggleChannel ='toggleFn'/>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelAPI } from '@/api/user.js'
import Article from './compinent/Article.vue'
import EditChannel from './compinent/EditChannel.vue'
import { Toast } from 'vant'
import { getItem } from '@/utils/storage.js'
export default {
  data () {
    return {
      active: 0,
      UserChannel: [],
      showPopup: false // 是否显示弹出层
    }
  },
  components: {
    Article,
    EditChannel
  },
  created () {
    this.getUserChannel()
  },
  methods: {
    // 获取用户频道的方法
    // 先判断是否登录 本地有没数据 未登录本地有数据 用本地的 反之请求接口默认的
    async getUserChannel () {
      try {
        const localChannel = getItem('TOUTIAO_CHANNELS')
        if (!this.$store.state.user && localChannel) {
          this.UserChannel = localChannel
        } else {
          const res = await getUserChannelAPI()
          this.UserChannel = res.channels
        }
        // console.log(this.UserChannel)
      } catch (error) {
        Toast('系统异常')
      }
    },
    toggleFn (i, isShow) {
      this.active = i // 在子组件完成状态时 点击子组件我的频道中的某一项 将索引传递过来 我进行跳转
      this.showPopup = isShow
    }
  }
}
</script>

<style scoped lang='less'>
.home-container {
  /deep/.van-nav-bar__title {
    max-width: unset;
     .search-btn {
    width: 555px;
    height: 64px;
    background: rgba(255, 255, 255, .2);
    border-radius: 32px;
    border:none;
    .van-icon-search {
      color :#fff
    }
  }
  }
  /deep/.navs {
    .van-tabs__wrap {
      height: 80px;
      border-bottom: 1px solid #EDEFF3;
      .van-tabs__nav--line {
        padding: 0;
      }
    }
    .van-tab {
      width: 200px;
      border-right: 1px solid #EDEFF3;
      .van-tab__text{
        font-size: 28px;
        color: #777;
      }
    }
    .right-btn {
      position: fixed;
      right: 0;
      width: 66px;
      height: 80px;
      background: rgba(255, 255, 255, .9);
      display: flex;
      justify-content: center;
      align-items: center;
      .toutiao-gengduo {
        font-size: 33px
      }
      &::before {
       content: '';
       width: 2px;
       height: 58px;
       background-image:url(~@/assets/gradient-gray-line.png);
       background-size: 100%,100%;
       position: absolute;
       left: 0;
     }
    }
    .placeholder {
      width: 66px;
      flex-shrink: 0;
    }
    .van-tab--active {
      .van-tab__text{
      font-size: 30px;
      color: #333;
      }
    }
    .van-tabs__line {
      bottom: 8px;
      width: 31px;
      height: 6px;
      background: #3296FA;
      border-radius: 3px;
    }
  }
}

</style>
